<template>
    <div>
        <!-- 头部导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>添加商品</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>

            <!-- 提示去 -->
            <!-- center:文字是否居中 -->
            <!-- show-icon:是否显示图标 -->
            <!-- closeble：是否可关闭 -->
            <el-alert
                title="添加商品信息"
                type="info"
                center
                show-icon
                :closable="false"
            >
            </el-alert>

            <!-- 步骤条 -->
            <!-- space：每个 step 的间距，不填写将自适应间距。支持百分比 -->
            <!-- active：设置当前激活步骤,只能接受数值类型 -->
            <!-- process-status：当前步骤的状态 -->
            <!-- finish-status:设置结束步骤的状态 -->
            <el-steps 
                :space="200" 
                :active="parseInt(activeIndex)"
                process-status="process "
                finish-status="success"
                align-center
            >
                <el-step title="基本信息" ></el-step>
                <el-step title="商品参数"></el-step>
                <el-step title="商品属性"></el-step>
                <el-step title="商品图片"></el-step>
                <el-step title="商品内容"></el-step>
                <el-step title="完成"></el-step>
            </el-steps>


            <!-- tabs栏 -->

            <el-form 
                :model="addForm"
                :rules="addFormRules" 
                ref="addFormRef" 
                label-width="100px" 
                label-position="top"
            >
            <!-- tab-position：选项卡所在位置 -->
            <!-- v-model：绑定的el-tab-pane里的name值 -->
            <!-- 注意:tabs-pane只能在tabs里面,所以form包裹tabs -->
            <!-- label-position：指定文本框的位置  -->
            <!-- beforeTableleave：切换标签之前的钩子,参数是函数 -->
                <el-tabs 
                    v-model="activeIndex"   
                    :tab-position="'left'" 
                    :before-leave="beforeTableleave"
                    @tab-click="tabClicked"
                >

                    <el-tab-pane label="基本信息" name="0">

                        <el-form-item label="商品名称" prop="goods_name">
                            <el-input v-model="addForm.goods_name"></el-input>
                        </el-form-item>

                        <el-form-item label="商品价格" prop="goods_price">
                            <el-input v-model="addForm.goods_price" type="number"></el-input>
                        </el-form-item>

                        <el-form-item label="商品重量" prop="goods_weight">
                            <el-input v-model="addForm.goods_weight" type="number"></el-input>
                        </el-form-item>

                        <el-form-item label="商品数量" prop="goods_number">
                            <el-input v-model="addForm.goods_number" type="number"></el-input>
                        </el-form-item>


                    <!-- 级联选择框 -->
                    <!-- v-model:级联选择器选中的值,必须是数组 -->
                    <!-- options:级联选择器数据源 -->
                    <!-- change:当选中节点变化时触发 -->

                        <!-- prop:配置选项(注意props用法)
                        expandTrigger='hover':次级菜单的展开方式
                        clearable:是否支持清空选项
                        change-on-select：是否支持子父节点互不关联，
                        改成了props里checkStrictly 
                    -->
                        <el-form-item label="商品分类" prop="goods_cat">
                            <el-cascader
                                v-model="addForm.goods_cat"
                                :options="cateList"
                                :props="cateProps"
                                @change="handleChange"
                                clearable
                            >
                            </el-cascader>
                        </el-form-item>

                    </el-tab-pane>


                    <el-tab-pane label="商品参数" name="1">
                        <!-- 渲染的item项 -->
                        <el-form-item 
                            v-for="item in manyTableData"
                            :label="item.attr_name"
                            :key="item.attr_id"
                        >
                            <el-checkbox-group v-model="item.attr_vals">
                                <el-checkbox 
                                    v-for="(cb,index) in item.attr_vals" 
                                    :label="cb"
                                    :key="index"
                                    border
                                >
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-tab-pane>


                    <el-tab-pane label="商品属性" name="2">
                        <el-form-item 
                            v-for="item in onlyTableData"
                            :key="item.attr_id"
                            :label="item.attr_name"
                        >
                            <el-input v-model="item.attr_vals"></el-input>
                        </el-form-item>
                    </el-tab-pane>


            <!-- action:图片要上传到的后台api地址 -->
            <!-- on-preview：点击图片触发的预览事件 -->
            <!-- on-remove：点击x号触发的事件 -->
            <!-- list-type：图片的呈现方式 -->
            <!-- headers:设置上传的请求头部 -->
            <!-- on-success:图片上传成功的事件 -->
                    <el-tab-pane label="商品图片" name="3">
                        <el-upload
                            :action="uploadURL"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            list-type="picture"
                            :headers="headerObj"
                            :on-success="handleSuccess"
                        >
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-tab-pane>


                <!-- 商品类容tabs -->
                    <el-tab-pane label="商品内容" name="4">

                        <!-- 富文本编辑器组件 -->
                        <!-- v-model：绑定的用户输入的值 -->
                        <quill-editor
                            v-model="addForm.goods_introduce"
                        >

                        </quill-editor>

                        <el-button type="primary" @click="add">添加商品</el-button>

                    </el-tab-pane>
                </el-tabs>
            </el-form>

        </el-card>


    <!-- 图片预览对话框 -->
        <el-dialog
            title="图片预览"
            :visible.sync="previewVisible"
            width="50%"
        >
            <img :src="previewPath" alt="" class="previewImg">
            
        </el-dialog>
    </div>
</template>

<script>

    // 导入的lodash包，用来做深拷贝
    import _ from 'lodash';

    export default {

        created() {
            this.getCateList();
        },

        data() {
            return {
                //进度条激活是第几步,同时也是tabs标签的name
                activeIndex:'0', 

                //添加商品的表单数据对象
                addForm:{
                    goods_name:"",
                    goods_price:0, //商品价格
                    goods_weight:0, //商品重量
                    goods_number:0, //商品数量

                    //级联选择框的(v-model)的数组,存的id,prop里配置的
                    goods_cat:[],

                    //图片的数组
                    pics:[],

                    //商品的详情
                    goods_introduce:"",

                    //add页面所有需要修改的参数的数组
                    attrs:[],
                },

                //表单验证规则
                addFormRules:{
                    goods_name:[
                        {
                            required:true,
                            message: '请输入商品名称',
                            trigger:'blur'
                        }
                    ],

                    goods_price:[
                        {
                            required:true,
                            message: '请输入商品价格',
                            trigger:'blur'
                        }
                    ],

                    goods_weight:[
                        {
                            required:true,
                            message: '请输入商品重量',
                            trigger:'blur'
                        }
                    ],

                    goods_number:[
                        {
                            required:true,
                            message: '请输入商品数量',
                            trigger:'blur'
                        }
                    ],

                    goods_cat:[
                        {
                            required:true,
                            message: '请选择商品分类',
                            trigger:'blur'
                        }
                    ],



                },


                //商品分类数据列表
                cateList:[],


                //指定级联选择器的配置对象
                cateProps:{
                    //指定选项的值为选项对象的某个属性值(让id当成选中的value值)
                    value:"cat_id",

                    //指定选项标签为选项对象的某个属性值(展示给用户看的选项值)
                    label:"cat_name",

                    //指定选项的子选项为选项对象的某个属性值
                    children:"children",

                    //次级菜单的展开方式
                    expandTrigger:"hover",
                },


                //动态参数列表数组
                manyTableData:[],


                //多选框使用的数组,用来存选中值的
                checkList:[],


                //静态参数使用的数组
                onlyTableData:[],


                //上传图片的url地址，我们自己的后台
                uploadURL:'http://127.0.0.1:8888/api/private/v1/upload',

                //图片上传组件的headers请求头对象
                //在每次请求前给他添加一个token,方便给验证，防止 出现无效token
                //Authorization:是登陆的时候做得token权限
                headerObj:{
                    Authorization:window.sessionStorage.getItem("token")
                },

                //预览事件用
                previewPath:"",

                //预览图片对话框的显示隐藏
                previewVisible:false,


                


            }
        },

        methods: {

            //获取商品 分类数据列表
            async getCateList(){

                const {data:res} = await this.$http.get("categories");
                // console.log(res);

                if(res.meta.status !==200){
                    return this.$message.error("获取商品分类的数据列表失败");
                }
                this.cateList = res.data;
                // console.log(this.cateList);


            },


            //当选中下拉框数据变化时触发
            handleChange(){
                // console.log(this.addForm.goods_cat);

                //控制只能选中三级商品分类 
                if(this.addForm.goods_cat.length !== 3){
                    this.$message({
                        message:"只能选择三级商品分类！",
                        duration:1000,
                        type:"error",
                    });
                    this.addForm.goods_cat = [];
                }


            },

            //切换标签之前的钩子，若返回 false 或者返回 Promise
            // 且被 reject，则阻止切换
            // activeName：当前标签页的name绑定值
            // oldActiveName：即将前往标签页的name绑定值
            beforeTableleave(){
                // console.log(activeName,oldActiveName);

                //判断基本信息的商品分类是否选择,没有选择不准跳转页面
                if(this.addForm.goods_cat.length !==3){
                    this.$message({
                        message:"请先选择三级商品分类！",
                        duration:1000,
                        type:"error",
                    });

                    return false;
                }

            },

            //tabs标签切换事件
            async tabClicked(){
                // console.log(this.activeIndex);

                //商品参数tabs
                if(this.activeIndex === "1"){
                    // console.log("动态参数面板");
                    const {data:res} = await this.$http.get(`categories/${this.cateId}/attributes`,{
                        params:{
                            sel:"many"
                        }
                    });

                    if(res.meta.status !== 200){
                        return this.$message.error("获取参数失败");
                    }


                    res.data.forEach(item => {
                        //判断item.attr_vals是否为空
                        item.attr_vals =
                        item.attr_vals.length === 0 ? 
                        [] : item.attr_vals.split(" ");
                        
                    })

                    // console.log(res.data);

                    this.manyTableData = res.data;


                }

                //商品属性
                if(this.activeIndex === "2"){
                    // console.log("静态参数面板");
                    const {data:res} = await this.$http.get(`categories/${this.cateId}/attributes`,{
                        params:{
                            sel:"only"
                        }
                    });

                    if(res.meta.status !== 200){
                        return this.$message.error("获取参数失败");
                    }

                    // console.log(res.data);

                    this.onlyTableData = res.data;


                }
            },


            //处理图片预览事件
            handlePreview(file){
                //原理:通过点击图片预览事件,打开对话框,对话框里面
                //    放img标签,标签src是一个绝对地址
                // console.log(file);
                
                this.previewPath =file.response.data.url;
                this.previewVisible =true;



            },

            //点击删除图片触发的事件
            handleRemove(file){
                //file:即将删除图片的信息
                // console.log(file);

                //1.获取将要删除的图片的相对路径
                const filePath = file.response.data.tmp_path;

                //2.从pics数组中,找到这个图片对应的索引值
                //findIndex:获取满足要求的数组下标
                // x:代表数组的每一项（这里代表的pics的每一项）
                const i = this.addForm.pics.findIndex(value=>value.pic === filePath);

                //3.调用数组的splice方法,把图片信息对象,从pics数组中移除
                this.addForm.pics.splice(i,1);

                // console.log(this.addForm.pics)


            },

            //图片上传成功,将上传成功的相对地址保存到自定义的数组里面
            handleSuccess(response){

                //response:图片上传成功返回回来的对象
                // console.log(response);

                //1.拼接得到一个图片信息对象
                const picInfo = {pic:response.data.tmp_path};

                //2.将图片信息对象push到pics数组中

                this.addForm.pics.push(picInfo) ;
                // console.log(this.addForm.pics)
            },


            //商品内容里面的添加按钮（这个函数很关键）
             add(){
                // console.log(this.addForm.goods_introduce);
                this.$refs.addFormRef.validate(async (valid) =>{
                    // console.log(valid,obj);
                    if(!valid){
                        return this.$message.error("请填写必要的表单项");
                    }

                    //注意:每个tabs都需要去点一下才能获取到数据，因为在
                    // tabClicked定义了，只有切换了才有赋值到对应的数组

                    // goods_cat：级联选择框存选择到的值的数组
                    // attr_vals：商品参数和商品属性的数据

                    //执行添加的业务逻辑
                    //在级联选择框定义了goods_cat是数组,这里转成字符会报错，
                    //所以需要深拷贝,
                    // lodash包 , cloneDeep(obj)
                    // console.log(this.addForm);//数组
                    const cloneDeepAddform =  _.cloneDeep(this.addForm);
                    cloneDeepAddform.goods_cat =cloneDeepAddform.goods_cat.join(',');
                    // console.log(cloneDeepAddform); //转成了字符


                    //处理动态参数（商品参数tabs里面使用的数据就是）
                    this.manyTableData.forEach(item =>{
                        const newInfo = {
                            attr_id: item.attr_id,
                            //以空格拆分
                            attr_value: item.attr_vals.join(' '),
                        }

                        this.addForm.attrs.push(newInfo);

                    })

                    //处理静态属性(商品属性tabs里面使用的数据)
                    this.onlyTableData.forEach(item =>{
                        const newInfo = {
                            attr_id: item.attr_id,
                            //这个本来就是字符,所以不用拆分了
                            attr_value: item.attr_vals,
                        }

                        this.addForm.attrs.push(newInfo);
                    })

                    
                    cloneDeepAddform.attrs = this.addForm.attrs;
                    // console.log(cloneDeepAddform);


    /* ******上面是处理各种需要传递到后台的参数,下面是发起请求******* */

                    const {data:res} = await this.$http.post("goods",cloneDeepAddform);
                    
                    // console.log(res);
                    if(res.meta.status !== 201){
                        return this.$message.error("添加商品失败");
                    }

                    this.$message.success("添加商品成功");

                    this.$router.push("/goods");



                })
            }

            
        },

        computed: {

            //计算选择的三级分类id
            cateId(){
                if(this.addForm.goods_cat.length === 3 ){
                    return this.addForm.goods_cat[2];
                }
                return null;
            }
        },
        
    }



    /* 
        Network-Preview-upload(接口)-可以查看文件是否上传成功(因为
        token问题，可能会上传不成功，所以必要的时候可以查看)
    
    */
</script>

<style lang="less" scoped>
    .el-checkbox {
        margin: 0 10px 0 0 !important;
    }

    .previewImg{
        width: 100%;
    }
    .el-button{
        margin: 15px;
    }
</style>